<template>
  <div>
    <span @click="showPwd">忘记密码？</span>
    <a-modal v-model="visiblePwd" @ok="handleOk" :footer="null">
      <div style="margin: 0 auto 10px; text-align: center">忘记密码</div>
      <a-input placeholder="请输入账号" ref="loginName"/>
      <a-input-password placeholder="请输入新密码"  ref="newPsw"/>
      <a-input-password placeholder="请再次输入新密码"  ref="newPsw2"/>
      <a-input placeholder="请输入手机号" ref="phoneNum"/>
      <div>
        <a-input style="width: 150px;margin-right: 30px" placeholder="请输入验证码"  ref="code"/>
        <a-button style="width: 105px;" type="primary" @click="getCode">
          获取验证码
        </a-button>
      </div>
      <a-button type="primary" @click="setNewPsw">
        确认更改密码
      </a-button>
      <div style="margin-top: 10px;"><span @click="goRegister">立即注册</span><span @click="doLogin" style="margin-left: 210px">去登陆</span></div>
    </a-modal>
  </div>
</template>


<script>
import {forgetCode,forgetPsw} from '../Api/Api'
export default {
  data() {
    return {
      visiblePwd: false,

    };
  },
  methods: {
    doLogin(){
      this.visiblePwd = false;
      // console.log(this.$store.state.visible)
      this.$store.commit('changeVisible',{visible:true})
      // console.log(this.$store.state.visible)
    },
    goRegister(){
      this.visiblePwd = false;
      this.$store.commit('changeVisibleRegister',{visibleRegister:true})
    },
    getCode(){
      console.log(this.$refs.loginName.stateValue)
      console.log(this.$refs.phoneNum.stateValue)
      // console.log(this.$refs.newPsw.stateValue)
      // console.log(this.$refs.newPsw2.stateValue)
      // console.log(this.$refs.code.stateValue)
      forgetCode(this.$refs.loginName.stateValue,this.$refs.phoneNum.stateValue).then(res=>{
        console.log(res)

      })
    },
    setNewPsw(){
      console.log(this.$refs.loginName.stateValue)
      console.log(this.$refs.phoneNum.stateValue)
      // console.log(this.$refs.newPsw.stateValue)
      console.log(this.$refs.newPsw2.$refs.input.stateValue)
      console.log(this.$refs.code.stateValue)
      forgetPsw(this.$refs.loginName.stateValue,this.$refs.newPsw2.$refs.input.stateValue,this.$refs.phoneNum.stateValue,this.$refs.code.stateValue).then(res=>{
        console.log(res)
        if(res.code==0){
          this.visiblePwd=false

        }
      })
    },
    showPwd() {
      this.visiblePwd = true;
    },
    handleOk(e) {
      console.log(e);
      this.visiblePwd = false;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-modal-content {
  width: 380px;
  //   height: 533px;
}
/deep/.ant-input {
  margin: 10px 0;
}
</style>